<template>
    <div v-if="cinemaTicket.showData.movies.length" class="seat-wrap">
        <div v-for="item in cinemaTicket.showData.movies" :key="item.id">
            <div v-if="item.id == movieId " class="movies_ticket_wrapper">
                <div class="movies_ticket_header" style="padding:10px ;border-bottom: 1px solid #f2f2f2">
                    <div class="movies_title">
                        <div class="movies_nm">{{item.nm}}</div>
                        <div class="movies_sc" v-if=" item.sc.substr(0,1) == 0 ">&nbsp;&nbsp;{{item.wish}}人想看</div>
                        <div class="movies_sc" v-else>&nbsp;&nbsp;{{item.sc}}分</div>
                    </div>
                    <div class="movies_info">{{item.desc}}</div>
                </div>
                <div class="movies_ticket_list">
                   <div class="movies_tab">
                        <div class="movies_tab_page"  v-for="(date,index) in item.shows" :key="date.dateShow" @tap="choseDate(index)">
                            <span :class="{date_tab:dateTabActive === index}">{{date.dateShow}}</span>
                        </div>
                   </div>
                   <div class="movies_tab_container">
                       <div class="movies_seat_wrapper">
                            <div v-for="(dataShows,index) in item.shows" :key="dataShows.dateShow" v-if="index == dateIndex" >
                                <template v-if="dataShows.plist.length > 0">
                                        <div class="movie_sell_list_wrapper" v-for="items in dataShows.plist" :key="items.tm">
                                            <div class="movie_playtime">
                                                <!-- 过滤 返回电影结束时间 -->
                                                <span>{{items.tm}}</span><span>{{items.tm | endTime(item)}}散场</span>
                                            </div>
                                            <div class="movie_playhall">
                                                <span>{{items.lang}} {{items.tp}}</span> <span>{{items.th}}</span>
                                            </div>
                                            <div class="movie_vip_price">
                                                <div class="price_symbol"><span>￥</span><span>{{items.vipPrice}}</span><span>{{items.vipPriceName}}</span></div>
                                                <div class="first_order">{{items.vipPriceNameNew}}</div>
                                            </div>
                                            <div class="movie_buy_btn">
                                                购票
                                            </div>
                                        </div>
                                </template>
                                <div v-else class="no-seat_tip">
                                    <div class="no_seat_icon"><img src="@/assets/images/no_movie.png" alt=""></div>
                                    <div class="no_seat_text">今天场次已映完</div>
                                    <div class="no_seat_title" @tap="toFirstDate(item.shows)">点击查看{{item.shows | filterFirstDate}}场次</div>
                                </div>
                            </div>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
export default {
  data () {
    return {
      dateIndex: 0,
      dateTabActive: 0
    }
  },
  props: ['cinemaTicket', 'movieId'],
  methods: {
    choseDate (index) {
      this.dateIndex = index
      this.dateTabActive = index
      console.log(index)
    },
    // 点击切换当前近场次
    toFirstDate (shows) {
      for (let i = 0; i < shows.length; i++) {
        if (shows[i].plist.length > 0) {
          this.dateIndex = i
          this.dateTabActive = i
          break
        }
      }
    }
  },
  filters: {
    //   过滤鲜红色
    filterFirstDate (shows) {
      for (let i = 0; i < shows.length; i++) {
        if (shows[i].plist.length > 0) {
          return shows[i].showDate
        }
      }
    },
    endTime (starTime, movie) {
      let date = Number(new Date('2019/12/1 ' + starTime + ':00').getTime()) + movie.dur * 60 * 1000
      let timer = new Date(parseInt(date))
      let h = timer.getHours() > 10 ? timer.getHours() : '0' + timer.getHours()
      let m = timer.getMinutes() > 10 ? timer.getMinutes() : '0' + timer.getMinutes()
      return h + ':' + m
      // let currentDate = new Date(parseInt(date)).toLocaleString();
      // let len = currentDate.length
      // return  currentDate.substring(len-3,len-8)
    }
  }
}
</script>
<style>
    .seat-wrap{width: 100%}
    .movies_ticket_wrapper{width: 100%;display: flex;flex-direction: column;};
    .movies_ticket_header{display: flex;flex-direction: column}
    .movies_title{display: flex;flex-direction: row;justify-content: center}
    .movies_nm{font-size: 18px;font-weight: bold;color: #000000;line-height: 21px}
    .movies_sc{font-size: 16px;font-weight: bold;color: #FFB400;line-height: 21px}
    .movies_info{font-size: 13px;color: #999999;text-align: center;padding: 5px 0 0 0;}

    .movies_tab{width:100%;display: flex;flex-direction: row;overflow: auto;text-align: center;}
    .movies_tab_page{width: 33.33%;flex-shrink: 0;font-size:14px;padding: 12px 0;}
    .movies_tab_page span{padding: 10px 5px;border-bottom: 2px solid white;}
    .movies_tab_page .date_tab{border-color:#f03d37;color: #f03d37}

    .movie_sell_list_wrapper{margin: 0 10px;padding: 15px 0;border-bottom: 1px solid #eeeeee;display: flex;justify-content: flex-start;align-items: center}
    .movie_sell_list_wrapper:last-child{border-bottom: none}
    .movie_playtime{display: flex;flex-direction: column;font-size: 20px;margin-right: 10px}
    .movie_playtime span:nth-child(2){font-size: 12px;color: #777777;margin-top: 5px}
    .movie_playhall{display: flex;flex-direction: column;flex: 1;font-size: 13px;color: #333;margin-right: 10px}
    .movie_playhall span:nth-child(2){font-size: 12px;color: #777777;margin-top: 5px}
    .movie_vip_price{display: flex;flex-direction: column}
    .price_symbol {display: flex;flex-direction: row;align-items:center}
    .price_symbol span:nth-child(1){font-size: 12px;color: #f03d37}
    .price_symbol span:nth-child(2){font-size: 16px;color: #f03d37}
    .price_symbol span:nth-child(3){font-size: 12px;color: #fff;background: #FF9900;margin-left: 3px;line-height: 12px;padding: 1px;border-radius: 3px}
    .first_order{font-size: 12px;color: #777777;margin-top: 5px}
    .movie_buy_btn{line-height: 12px;font-size: 12px;color: #fff;background: #f03d37;border-radius: 4px;padding: 8px 15px;margin-left: 25px}

    .no-seat_tip{width: 100%;padding: 20px 0;background: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center}
    .no_seat_icon img{width: 75px;height: 71px;}
    .no_seat_text{font-size: 13px;color: #D2D2D2;padding: 8px 0;}
    .no_seat_title {font-size: 13px;color:#FF9900;border: 1px solid #FF9900;border-radius: 20px;padding: 5px 10px; }
</style>
